import React, { forwardRef, useImperativeHandle, useRef } from 'react'

const MXInput = forwardRef((props, ref) => {

  const inputRef = useRef()

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus()
    }
  }), [inputRef.current])

  return <input ref={inputRef} type="text"/>
})

export default function UseImperativeHandleHookDemo() {
  const inputRef = useRef()

  return (
    <div>
      <MXInput ref={inputRef}/>
      <button onClick={e => inputRef.current.focus()}>Focus</button>
    </div>
  )
}
